<template>
  <div class="app-container eutr-content">
    <div class="eutr-content-left">
      <leftTree @tree-check-change="handleTreeCheckChange" :apiType="'segmentRiverTree'"
        :apiParms="{ segmentType: 'IsManual', segmentTypeDrink: 'filter' }"></leftTree>
    </div>
   
    <div class="eutr-content-right">
      <el-card>
        <el-tabs v-model="activeTab" type="card">

          <el-tab-pane label="基本信息" name="basicInfo">
            <el-form :model="basicInfoData" label-width="120px" size="small" class="basic-info-form">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="饮用水源地名称:">
                    <span style="margin-left: 10px;">{{ basicInfoData.drinksourcename || '-' }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="饮用水源地编码:">
                    <span style="margin-left: 10px;">{{ basicInfoData.drinksourcecode || '-' }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="行政区划:">
                    <span style="margin-left: 10px;">{{ basicInfoData.county || '-' }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="水源地类型:">
                    <span style="margin-left: 10px;">{{ getSourceTypeText(basicInfoData.drinksourcetype) }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="所属河流:">
                    <span style="margin-left: 10px;">{{ basicInfoData.rivername || '-' }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="对应水厂:">
                    <span style="margin-left: 10px;">{{ basicInfoData.waterworks || '-' }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="设计取水量:">
                    <span style="margin-left: 10px;">{{ basicInfoData.designwithdrawal || '-' }} 万吨/年</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="实际取水量:">
                    <span style="margin-left: 10px;">{{ basicInfoData.actualwithdrawal || '-' }} 万吨/年</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="水源地建成时间:">
                    <span style="margin-left: 10px;">{{ basicInfoData.completiondate || '-' }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="正式取水时间:">
                    <span style="margin-left: 10px;">{{ basicInfoData.withdrawaldate || '-' }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="是否跨界水源:">
                    <span style="margin-left: 10px;">{{ basicInfoData.istransboundary || '-' }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="跨界类型:">
                    <span style="margin-left: 10px;">{{ basicInfoData.transboundarytype || '-' }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="服务人口:">
                    <span style="margin-left: 10px;">{{ basicInfoData.populationcovered || '-' }} 万人</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="取水水位:">
                    <span style="margin-left: 10px;">{{ basicInfoData.intakestage || '-' }} m</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="设计枯水位高程:">
                    <span style="margin-left: 10px;">{{ basicInfoData.drystage || '-' }} m</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="经度:">
                    <span style="margin-left: 10px;">{{ basicInfoData.longitude || '-' }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="纬度:">
                    <span style="margin-left: 10px;">{{ basicInfoData.latitude || '-' }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="水源井:">
                    <span style="margin-left: 10px;">{{ basicInfoData.wellscount || '-' }} 个</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="水源地级别:">
                    <span style="margin-left: 10px;">{{ getSourceLevelText(basicInfoData.drinksourcelevel) }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="使用状态:">
                    <span style="margin-left: 10px;">{{ getUseStatusText(basicInfoData.usestatus) }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="简介:">
                    <div style="margin-left: 10px; padding: 10px; border: 1px solid #dcdfe6; border-radius: 4px; background-color: #f5f7fa; min-height: 80px;">
                      {{ basicInfoData.introduction || '-' }}
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="取水点" name="waterPoints">
            <div class="water-points-container">
              <waterSourceIntake :key="waterPointsKey" :nodeid="checkedTreeNode.id"></waterSourceIntake>
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="监测指标" name="monitoringIndicators">
            <div class="monitoring-indicators-container">
              <el-row :gutter="20" style="margin-bottom: 10px;">
                <el-col :span="6">
                  <el-input v-model="indicatorSearch" placeholder="因子名称" prefix-icon="el-icon-search"></el-input>
                </el-col>
                <el-col :span="4" style="text-align: right;">
                  <el-button type="primary">查询</el-button>
                </el-col>
                <el-col :span="14" style="text-align: right;">
                  <el-button type="primary" size="small" style="margin-right: 10px;">新增</el-button>
                  <el-button type="danger" size="small">删除</el-button>
                </el-col>
              </el-row>
              <el-table :data="monitoringIndicatorsData" style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="index" label="序号" width="80"></el-table-column>
                <el-table-column prop="businessCode" label="业务类别编码" width="120"></el-table-column>
                <el-table-column prop="businessType" label="业务类别" width="120"></el-table-column>
                <el-table-column prop="factorName" label="因子名称" width="180"></el-table-column>
                <el-table-column prop="hourStandardValue" label="小时标准位数" width="120"></el-table-column>
                <el-table-column prop="agreementValue" label="履约位数" width="100"></el-table-column>
                <el-table-column prop="waterStandardName" label="水质标准名称" width="150"></el-table-column>
                <el-table-column prop="isEvaluate" label="因子是否参与评价" width="120"></el-table-column>
                <el-table-column prop="monitorTarget" label="监测项目排序" width="120"></el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                  <template slot-scope="scope">
                    <el-button type="text" size="small">修改</el-button>
                    <el-button type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount"
                style="margin-top: 15px; text-align: right;"></el-pagination>
            </div>
          </el-tab-pane> -->
          <el-tab-pane label="监测指标" name="monitoringIndicators"> 
            <!-- :businesscategorycode="checkedTreeNode.id" -->
            <target :key="monitoringIndicatorsKey" businesscategorycode="CBF8" :drinksourcetype="basicInfoData.drinksourcetype"></target>
          </el-tab-pane>
        </el-tabs>
      </el-card>

    </div>
  </div>
</template>

<script>
import leftTree from './components/newLeftTree.vue';
import { getDrinkingWaterSourceInfo} from './api/informationApi';
import waterSourceIntake from './waterSourceIntake.vue';
import target from "./components/target.vue"
export default {
  components: {
    leftTree,
    waterSourceIntake,
    target
  },
  data() {
    return {
      checkedTreeNode: {}, // 存储选中的树节点
      activeTab: 'basicInfo',
      waterPointsKey: 0, // 用于强制重新加载waterSourceIntake组件的key
      monitoringIndicatorsKey: 0, // 用于强制重新加载target组件的key
      // 基本信息数据
      basicInfoData: {},
      // 监测指标数据
      monitoringIndicatorsData: [
        { index: 1, businessCode: 'CBF8', businessType: '地下饮用水源地', factorName: '碘化物', waterStandardName: '1', monitorTarget: '27' },
        { index: 2, businessCode: 'CBF8', businessType: '地下饮用水源地', factorName: '氨氮', waterStandardName: '1', monitorTarget: '18' },
        { index: 3, businessCode: 'CBF8', businessType: '地下饮用水源地', factorName: '氯化物', waterStandardName: '1', monitorTarget: '9' },
        { index: 4, businessCode: 'CBF8', businessType: '地下饮用水源地', factorName: '浑浊度', waterStandardName: '1', monitorTarget: '3' },
        { index: 5, businessCode: 'CBF8', businessType: '地下饮用水源地', factorName: '铬', waterStandardName: '1', monitorTarget: '48' },
        { index: 6, businessCode: 'CBF8', businessType: '地下饮用水源地', factorName: '总总放射性', waterStandardName: '1', monitorTarget: '39' },
        { index: 7, businessCode: 'CBF8', businessType: '地下饮用水源地', factorName: '六价铬', waterStandardName: '1', monitorTarget: '32' },
        { index: 8, businessCode: 'CBF8', businessType: '地下饮用水源地', factorName: '1,1-二氯乙烯', waterStandardName: '1', monitorTarget: '56' },
        { index: 9, businessCode: 'CBF8', businessType: '地下饮用水源地', factorName: '邻苯二甲酸（2-...', waterStandardName: '1', monitorTarget: '75' },
        { index: 10, businessCode: 'CBF8', businessType: '地下饮用水源地', factorName: '溶解性总固体', waterStandardName: '1', monitorTarget: '7' }
      ],
      // 搜索条件
      indicatorSearch: '',
      // 分页参数
      currentPage: 1,
      pageSize: 10,
      totalCount: 92
    }
  },
  watch: {
    activeTab(val) {
      if (val === 'basicInfo') {
        this.loadData(this.checkedTreeNode);
      } else if (val === 'monitoringIndicators') {
        this.monitoringIndicatorsKey += 1;
      } else if (val === 'waterPoints') {
        // 强制重新加载waterSourceIntake组件
        this.waterPointsKey += 1;
      }
    }
  },
  methods: {
      // 获取水源地类型文本
      getSourceTypeText(value) {
        const typeMap = {
          '1': '河流',
          '2': '湖库',
          '3': '地下水'
        }
        return typeMap[value] || '-';
      },
      
      // 获取水源地级别文本
      getSourceLevelText(value) {
        const levelMap = {
          '0': '城市',
          '1': '县级以上',
          '2': '千吨万人',
          '3': '千人以上',
          '4': '乡镇',
          '5': '其他'
        }
        return levelMap[value] || '-';
      },
      
      // 获取使用状态文本
      getUseStatusText(value) {
        const statusMap = {
          '0': '在用水源',
          '1': '备用水源',
          '2': '应急水源',
          '3': '停用',
          '4': '已撤销',
          '5': '其他'
        }
        return statusMap[value] || '-';
      },
    
    // 处理树节点选中变化
    handleTreeCheckChange(node) {
      this.checkedTreeNode = node;
      console.log('this.checkedTreeNode: ', this.checkedTreeNode);
      if (this.activeTab === 'basicInfo') {
        this.loadData(node);
      } else if (this.activeTab === 'monitoringIndicators') {
        this.monitoringIndicatorsKey += 1;
      } else if (this.activeTab === 'waterPoints') {
        // 强制重新加载waterSourceIntake组件
        this.waterPointsKey += 1;
      }
    },
    // 加载数据
    loadData(node) {
      // 这里应该调用API获取数据，
      console.log('加载节点数据:', node);
      this.getDrinkingWaterSourceInfo(node);
      // 模拟数据已在data中定义
    },
    getDrinkingWaterSourceInfo(node) {
      getDrinkingWaterSourceInfo(node.id).then(res => {
        if (res.code === 200) {
          this.basicInfoData = res.data;
        }
      });
    },
    // 分页相关方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadMonitoringIndicators();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadMonitoringIndicators();
    },
    // 加载监测指标数据
    loadMonitoringIndicators() {
      // 这里应该调用API获取数据，目前使用模拟数据
      console.log('加载监测指标数据，页码:', this.currentPage, '每页条数:', this.pageSize);
    }
  }
};
</script>

<style lang="scss" scoped>
.eutr-content-left {
  width: 300px;
}

.eutr-content {
  display: flex;
  justify-content: space-around;
}

.eutr-content-right {
  width: calc(100% - 320px);
}

.basic-info-form {
  margin-top: 10px;
}

.no-selection {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.no-selection-content {
  text-align: center;
  color: #909399;
}

.no-selection-content i {
  font-size: 48px;
  margin-bottom: 10px;
  display: block;
}

.water-points-container,
.monitoring-indicators-container {
  padding: 10px 0;
}
</style>
